<template>
  <div class="workspace">
    <div class="first">
      <div class="first-one">
        <div style="display: flex">
          <img
            src="../../assets/images/people.png"
            width="80px"
            height="100px"
          />
          <div class="first-one-info">
            <span style="font-weight: bold">您好，刘志东</span>
            <span style="margin-top: 10%">
              <span style="color: #707070; font-size: 12px; font-weight: bold"
                >职务：</span
              >
              <span style="font-weight: bold; font-size: 14px">人大代表</span>
            </span>
            <span style="margin-top: 4%">
              <span style="color: #707070; font-size: 12px; font-weight: bold"
                >所属区县：</span
              >
              <span style="font-weight: bold; font-size: 14px">延长县</span>
            </span>
            <span style="margin-top: 4%">
              <span style="color: #707070; font-size: 12px; font-weight: bold"
                >届次：</span
              >
              <span style="font-weight: bold; font-size: 14px">第十九届第一次</span>
            </span>
          </div>
        </div>
        <div class="first-one-btns">
          <div
            class="first-one-btns-item"
            v-for="btn in btnList"
            :key="btn.id"
            :id="`btn-${btn.id}`"
            @click="handleFirstBtnClick(btn)"
          >
            <img :src="btn.icon" width="20px" height="20px" />
            <span style="margin-left: 16px">
              {{ btn.text }}
            </span>
          </div>
        </div>
      </div>
      <div class="first-two">
        <div class="header">
          <div
            class="header__tab"
            v-for="tab in tabList"
            :key="tab.id"
            :id="`tab-${tab.id}`"
            @click="handleTabClick(tab)"
          >
            {{ tab.text }}
          </div>
          <span style="margin-left: auto; color: #a0a0a0">更多>></span>
        </div>
        <div class="content">
          <div v-for="con in contentList" :key="con.id" class="content-item">
            <div class="content-item__point"></div>
            <div class="content-item__text">{{ con.text }}</div>
            <div class="content-item__date">{{ con.date }}</div>
          </div>
        </div>
      </div>
      <div class="first-three">
        <div class="header">
          <div class="header-label">履职活动</div>
          <span style="margin-left: auto; color: #a0a0a0">更多>></span>
        </div>
        <div class="content">
          <div v-for="con in contentList" :key="con.id" class="content-item">
            <div class="content-item__point"></div>
            <div class="content-item__text">{{ con.text }}</div>
            <div class="content-item__date">{{ con.date }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="second">
      <div class="second-one">
        <div class="header">
          <div class="header-label">通知公告</div>
          <span style="margin-left: auto; color: #a0a0a0">更多>></span>
        </div>
        <div class="content">
          <div v-for="con in noticeList" :key="con.id" class="content-item">
            <!-- <div class="content-item__point"></div> -->
            <img :src="con.icon" width="15px" height="15px" style="margin-right: 4px;" />
            <div class="content-item__text" style="width: 60%; font-size: 14px">
              {{ con.text }}
            </div>
            <div class="content-item__date" style="font-size: 12px">
              {{ con.date }}
            </div>
          </div>
        </div>
      </div>
      <div class="second-two">
        <div style="display: flex; flex: 1">
          <div class="second-two-top" style="margin-right: 8px">
            <div class="header">
              <div class="header-label">工作信息</div>
              <span style="margin-left: auto; color: #a0a0a0">更多>></span>
            </div>
            <div class="content">
              <div style="display: flex; margin-bottom: 8px">
                <div
                  class="second-two-btns"
                  v-for="sb in sbtnList"
                  :key="sb.id"
                  :id="`sbtn-${sb.id}`"
                  @click="handleClickSbtn(sb)"
                >
                  {{ sb.text }}
                </div>
              </div>
              <div
                v-for="con in workInfoList"
                :key="con.id"
                class="content-item"
              >
                <div class="content-item__point"></div>
                <div class="content-item__text">
                  <span v-if="con.status !== 'read'" style="color: red"
                    >[未读]</span
                  >
                  {{ con.text }}
                </div>
                <div class="content-item__date">{{ con.date }}</div>
              </div>
            </div>
          </div>
          <div class="second-two-top">
            <div class="header">
              <div class="header-label">会议文件</div>
              <span style="margin-left: auto; color: #a0a0a0">更多>></span>
            </div>
            <div class="content">
              <div
                v-for="con in contentList"
                :key="con.id"
                class="content-item"
              >
                <div class="content-item__point"></div>
                <div class="content-item__text">{{ con.text }}</div>
                <div class="content-item__date">{{ con.date }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="second-two-bottom">
          <div class="header">
            <div class="header-label">代表学习</div>
            <span style="margin-left: auto; color: #a0a0a0">更多>></span>
          </div>
          <div style="display: flex;height: 80%;">
            <div class="study">
              <div class="study-item" v-for="stu in studyList" :key="stu.id">
                <img :src="stu.icon" width="50px" height="50px" />
                <span style="margin-top: 4px">{{ stu.text }}</span>
              </div>
            </div>
            <div class="content" style="flex: 1">
              <div
                v-for="con in studyInfoList"
                :key="con.id"
                class="content-item"
              >
                <!-- <div class="content-item__point"></div> -->
                <img :src="con.icon" width="20px" height="20px" style="margin-right: 4px;" />
                <div class="content-item__text">{{ con.text }}</div>
                <div class="content-item__date">{{ con.date }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lock from "../../assets/images/lock.png";
import info from "../../assets/images/info.png";
import advice from "../../assets/images/advice.png";
import sign from "../../assets/images/sign.png";
import notice from "../../assets/images/notice.png";
import study from "../../assets/images/study.png";
import stu1 from "../../assets/images/stu1.png";
import stu2 from "../../assets/images/stu2.png";
import stu3 from "../../assets/images/stu3.png";

export default {
  mounted() {
    this.handleFirstBtnClick(this.btnList[0]);
    this.handleTabClick(this.tabList[0]);
    this.handleClickSbtn(this.sbtnList[0]);
  },
  data() {
    return {
      btnList: [
        {
          id: 1,
          icon: lock,
          text: "修改密码",
        },
        {
          id: 2,
          icon: info,
          text: "我的信息",
        },
        {
          id: 3,
          icon: advice,
          text: "起草建议",
        },
        {
          id: 4,
          icon: sign,
          text: "履职登记",
        },
      ],
      tabList: [
        {
          id: 1,
          text: "我的建议",
        },
        {
          id: 2,
          text: "待审事项",
        },
      ],
      contentList: [
        {
          id: 1,
          text: "陪同代表观察",
          date: "2025-01-21",
        },
        {
          id: 2,
          text: "陪同代表观察",
          date: "2025-01-21",
        },
        {
          id: 3,
          text: "代表建议",
          date: "2025-01-21",
        },
        {
          id: 4,
          text: "关于加强网络订餐监管 保障饮食安全的建议",
          date: "2025-01-21",
        },
        {
          id: 5,
          text: "关于加强网络订餐监管 保障饮食安全的建议",
          date: "2025-01-21",
        },
        {
          id: 6,
          text: "关于加强网络订餐监管 保障饮食安全的建议",
          date: "2025-01-21",
        },
      ],
      noticeList: [
        {
          id: 1,
          icon: notice,
          text: "关于表彰2018年度代表建议办理",
          date: "2025-01-21",
        },
        {
          id: 2,
          icon: notice,
          text: "关于表彰2018年度代表建议办理",
          date: "2025-01-21",
        },
        {
          id: 3,
          icon: notice,
          text: "关于表彰2018年度代表建议办理",
          date: "2025-01-21",
        },
        {
          id: 4,
          icon: notice,
          text: "关于表彰2018年度代表建议办理",
          date: "2025-01-21",
        },
      ],
      workInfoList: [
        {
          id: 1,
          text: "工资发多少，劳资双方协商",
          date: "2025-01-21",
          status: "read",
        },
        {
          id: 2,
          text: "工资发多少，劳资双方协商",
          date: "2025-01-21",
          status: "read",
        },
        {
          id: 3,
          text: "工资发多少，劳资双方协商",
          date: "2025-01-21",
          status: "read",
        },
        {
          id: 4,
          text: "工资发多少，劳资双方协商",
          date: "2025-01-21",
          status: "read",
        },
        {
          id: 5,
          text: "工资发多少，劳资双方协商",
          date: "2025-01-21",
          status: "noRead",
        },
        {
          id: 6,
          text: "工资发多少，劳资双方协商",
          date: "2025-01-21",
          status: "noRead",
        },
      ],
      sbtnList: [
        {
          id: 1,
          text: "人大工作",
        },
        {
          id: 2,
          text: "政府工作",
        },
        {
          id: 3,
          text: "监察委工作",
        },
        {
          id: 4,
          text: "法律工作",
        },
        {
          id: 5,
          text: "检察院工作",
        },
      ],
      studyList: [
        {
          id: 1,
          icon: stu1,
          text: "法律法规",
        },
        {
          id: 2,
          icon: stu2,
          text: "政策方针",
        },
        {
          id: 3,
          icon: stu3,
          text: "社会经济",
        },
      ],
      studyInfoList: [
      {
          id: 1,
          icon: study,
          text: "线上学习通知：人大代表随时随地充电",
          date: "2025-01-21",
          status: "read",
        },
        {
          id: 2,
          icon: study,
          text: "实地考察学习通知：人大代表走出课堂，实践中成长",
          date: "2025-01-21",
          status: "read",
        },
        {
          id: 3,
          icon: study,
          text: "线上学习通知：人大代表随时随地充电",
          date: "2025-01-21",
          status: "read",
        },
        {
          id: 4,
          icon: study,
          text: "实地考察学习通知：人大代表走出课堂，实践中成长",
          date: "2025-01-21",
          status: "read",
        },
        {
          id: 5,
          icon: study,
          text: "线上学习通知：人大代表随时随地充电",
          date: "2025-01-21",
          status: "noRead",
        },
        {
          id: 6,
          icon: study,
          text: "实地考察学习通知：人大代表走出课堂，实践中成长",
          date: "2025-01-21",
          status: "noRead",
        },
      ]
    };
  },
  methods: {
    handleFirstBtnClick(btn) {
      this.btnList.forEach((b) => {
        let dom = document.getElementById(`btn-${b.id}`);
        if (b.id === btn.id) {
          dom.style.background = "red";
          dom.style.color = "#fff";
          return;
        }
        dom.style.background = "#fff";
        dom.style.color = "red";
      });
    },
    handleTabClick(tab) {
      this.tabList.forEach((t) => {
        let dom = document.getElementById(`tab-${t.id}`);
        if (t.id === tab.id) {
          dom.style["borderBottom"] = "2px solid red";
          dom.style.color = "red";
          dom.style.fontWeight = "bold";
          return;
        }
        dom.style["borderBottom"] = "none";
        dom.style.color = "black";
        dom.style.fontWeight = "500";
      });
    },
    handleClickSbtn(sb) {
      this.sbtnList.forEach((b) => {
        let dom = document.getElementById(`sbtn-${b.id}`);
        if (b.id === sb.id) {
          dom.style.background = "red";
          dom.style.color = "#fff";
          return;
        }
        dom.style.background = "#fff";
        dom.style.color = "black";
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.workspace {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
}
.first {
  width: 100%;
  height: 45%;
  display: flex;
  &-one {
    width: 20%;
    border: 2px solid #e1e1e1;
    border-radius: 5px;
    margin-right: 8px;
    padding: 8px;
    background: #fff;
    &-info {
      display: flex;
      flex-direction: column;
      margin-left: 16px;
    }
    &-btns {
      display: flex;
      flex-direction: column;
    }
  }
  &-two {
    flex: 1;
    border: 2px solid #e1e1e1;
    border-radius: 5px;
    margin-right: 8px;
    padding: 8px;
    background: #fff;
  }
  &-three {
    flex: 1;
    border: 2px solid #e1e1e1;
    border-radius: 5px;
    padding: 8px;
    background: #fff;
  }
}

.first-one-btns {
  height: 50%;
  margin-top: 8px;
  overflow: auto;
  &-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px 0px;
    font-size: 14px;
    text-align: center;
    border-radius: 5px;
    margin-top: 4px;
    color: red;
    font-weight: bold;
    border: 1px solid red;
  }
}

.second {
  flex: 1;
  display: flex;
  width: 100%;
  margin-top: 16px;
  &-one {
    width: 20%;
    height: 100%;
    background: #fff;
    border: 2px solid #e1e1e1;
    border-radius: 5px;
    margin-right: 8px;
    padding: 8px;
  }
  &-two {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    &-top {
      width: 100%;
      flex: 1;
      background: #fff;
      border: 2px solid #e1e1e1;
      border-radius: 5px;
      padding: 8px;
    }
    &-bottom {
      margin-top: 8px;
      height: 50%;
      background: #fff;
      border: 2px solid #e1e1e1;
      border-radius: 5px;
      padding: 8px;
    }
    &-btns {
      border: 2px solid red;
      border-radius: 5px;
      margin-right: 6px;
      padding: 4px;
      cursor: pointer;
      font-weight: bold;
      font-size: 14px;
    }
  }
}

.study {
  display: flex;
  width: 30%;
  align-items: center;
  border-right: 3px solid #f3f3f3;
  margin-right: 24px;
  justify-content: center;
  &-item {
    display: flex;
    flex-direction: column;
    margin-right: 10%;
    align-items: center;
    justify-content: center;
  }
}

.header {
  display: flex;
  &__tab {
    margin-right: 8px;
    cursor: pointer;
  }
  &-label {
    border-left: 4px solid red;
    padding-left: 8px;
    font-weight: bold;
  }
}

.content {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  height: 75%;
  overflow: auto;
  &-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    &__point {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: red;
      margin-right: 8px;
    }
    &__text {
      width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 这里设置最大行数为 3 行 */
      -webkit-box-orient: vertical;
    }
    &__date {
      margin-left: auto;
      color: #9f9f9f;
    }
  }
}
</style>